<template>
 <div class="wrapper">
	<div class="util">
		<span style="margin-left: 20px;">订单编号：</span>
		<el-input style="width: 260px;" placeholder="请输入" v-model="searchValue">
		 <template #append><el-button :icon="Search" @click="searchOrder()" /></template>
		</el-input>
		<el-form-item label="订单状态:" style="margin-bottom: 0;margin-left: 50px;">
		  <el-select  
			style="width: 120px;" placeholder="请选择" 
			v-model="status"
			@change="params.pageNo = 1;getByStatus()"
		>
			<el-option label="全部" value="-1"></el-option>
			<el-option label="已完成" value="已完成" />
			<el-option label="未付款" value="未付款" />
			<el-option label="已付款" value="已付款" />
			<el-option label="待收货" value="待收货" />
		  </el-select>
		</el-form-item>
		<span style="margin-left: 50px;" >订单时间：</span>  
		<div class="block" >
		  <el-date-picker
			v-model="timeRange"
			type="daterange"
			range-separator="-"
			start-placeholder="开始时间"
			end-placeholder="结束时间"
			value-format="YYYY-MM-DDTHH:mm:ss"
			@change="getByTimeRange"
		  />
		</div>
		<el-button type="danger" style="margin-left: 50px;" 
		:icon="ship" @click="batchShipOrders()">批量发货</el-button>
	 </div>
	<div class="main">
		<el-table
			:data="tableData.records"
			row-key="id"
			:header-cell-style="{background:'#F3F4F7',color:'#555'}"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column label="订单编号"  prop="orderId" show-overflow-tooltip/>
			<el-table-column label="创建用户" prop="username">
				<template #default="scope">
					{{scope.row.goodsList[0].username}}
				</template>
			</el-table-column>
			<el-table-column label="订单金额" width="120px" prop="totalAmount"/>
			<el-table-column label="支付方式" width="100px" prop="payMethod"></el-table-column>
			<el-table-column label="配送方式" width="100px" prop="deliveryMethod"></el-table-column>
			<el-table-column label="订单状态" width="100px" prop="orderStatus">
				<template #default="scope">
				<el-tag type="warning" v-if="scope.row.orderStatus=='已完成'">已完成</el-tag>
				<el-tag type="danger" v-if="scope.row.orderStatus=='未付款'">未付款</el-tag>
				<el-tag type="success" v-if="scope.row.orderStatus=='待收货'">待收货</el-tag>
				<el-tag type="primary" v-if="scope.row.orderStatus=='已付款'">已付款</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" width="180px" prop="createTime"></el-table-column>
			<el-table-column label="更新时间" width="180px" prop="updateTime"></el-table-column>
			<el-table-column label="操作" width="140px">
			 <template #default="scope">
			  <el-button plain size="small" type="primary" @click="openDetail(scope.row.goodsList)">查看</el-button>
			  <el-button size="small" type="danger"  v-show="scope.row.orderStatus === '已付款'" @click="shipOrder(scope.row.id)">发货</el-button>
			 </template>
			</el-table-column>
		</el-table>	
		<el-dialog v-model="showDetailTable"  title="订单详情">
			<el-table :data="orderDetail">
				<el-table-column label="商品图片" prop="imgs">
					<template #default="scope">
						<img :src="getImagePath(scope.row.imagePathList[0])" style="width: 66px; height:76px;border: 1px solid #cccccc;"/>
					</template>
				</el-table-column>
				<el-table-column label="商品名称" prop="name"></el-table-column>
				
				<el-table-column label="单价" prop="price">
					<template #default="scope">
						<span>￥{{scope.row.price}}</span>
					</template>
				</el-table-column>
				<el-table-column label="数量" prop="count"></el-table-column>
				<el-table-column label="小计" prop="totalAmount">
					<template #default="scope">
						<span>￥{{scope.row.totalAmount}}</span>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-pagination
			background
			layout="prev, pager, next, jumper"
			v-model:current-page="params.pageNo"
			:page-count="tableData.pages"
			:total="tableData.total"
			style="margin-top: 40px;"
			@current-change="pageChangeHandler"
		></el-pagination>
	</div>
 </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import ship from '@/components/icons/ship'
import { copy } from 'copy-anything'
import { reactive, ref } from 'vue'
import { get, post } from '@/plugins/axios'
import { getImagePath } from '@/util'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = reactive({
	records: [],
	pages: 0,
	total: 0
})
//存储备份数据
const searchValue = ref('')
const orderDetail = ref('')
const status = ref('')
const timeRange = ref([])
const params = reactive({
	userId: -1,
	pageNo: 1,
	pageSize: 10
})
const showDetailTable= ref(false)
const selectedOrders = ref([])

/* -------------------------函数部分------------------------------ */
function handleSelectionChange(val) {
      // val 是选中行的数据数组
      console.log('选中行的数据：', val);
	  selectedOrders.value= []
	  for(const key in val){
		  selectedOrders.value.push(val[key].id)
	  } 
	  console.dir(selectedOrders.value)
}
function shipOrder(id){
	post('/orders/updateStatus',{id, orderStatus: '待收货'}, content => {
		if(content) {
			ElMessage({
				type: 'success',
				message: '发货成功'
			})
		}
		getByStatus()
	})
}
function batchShipOrders(){
	if (this.selectedOrders.length === 0) {
	    ElMessage({
	        type: 'warning',
	        message: '请至少选择一个订单'
	    })
	}else{
		post('/orders/batchShipOrders',{ids:selectedOrders.value, orderStatus: '待收货'}, content => {
			if(content) {
				ElMessage({
					type: 'success',
					message: '发货成功'
				})
			}
			getByStatus()
		})
	}
}

function searchOrder(){
	if (searchValue.value !== '') {
	    get('/orders/searchByOrderId', 
		{ userId: params.userId, pageNo: params.pageNo, pageSize: params.pageSize, searchVal: searchValue.value },
		 content => {
			tableData.records = content.records
	        tableData.pages = content.pages
	        tableData.total = content.total
	    })
	} else {
	    get('/orders/list',{userId: params.userId, pageNo: params.pageNo, pageSize: params.pageSize},
		content=>{
	        //console.log(content)	
	        tableData.records = content.records
	        tableData.pages = content.pages
	        tableData.total = content.total
	    })
	}
}
function getByStatus() {
	console.log(status.value)
	if(status.value === '-1') {
		getTableData()
	}else {
		get('orders/getByOrderStatus', 
			{ userId: params.userId, pageNo: params.pageNo, pageSize: params.pageSize, status: status.value }, 
			content => {
				tableData.records = content.records
				tableData.pages = content.pages
				tableData.total = content.total
			})
	}
	
}
getTableData()
function getTableData() {
	get('/orders/list', params, content => {
		console.dir(content)
		tableData.records = content.records
		tableData.pages = content.pages
		tableData.total = content.total
	});
}
function openDetail(goodsList){
	orderDetail.value = goodsList
	showDetailTable.value=true
}

function getByTimeRange() {
	console.log(timeRange.value)
	if(timeRange.value === null) {
		getTableData()
	}else{
		get('orders/getByTimeRange',
			{ userId: params.userId, maxTime: timeRange.value[1], minTime: timeRange.value[0], pageNo: params.pageNo, pageSize: params.pageSize }, 
			content => {
				tableData.records = content.records
				tableData.pages = content.pages
				tableData.total = content.total
		})
	}
}
//处理分页逻辑
function pageChangeHandler() {
	if(status.value == '' || status.value == -1) {
		getTableData()
	}else{
		getByStatus()
	}
}
</script>

<style lang="scss" scoped>
.wrapper{
	height: 80vh;
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.span{
			font-size: 14px;
			margin-left: 20px;
		}
	}
	.el-button{
		display: flex;
	}		
	.el-button+.el-button {
		margin-left: 52px;
		margin-top: -24px;
	}
	.main{
		width: 100%;
		padding: 15px;
		height: 580px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 2px 0px 10px rgba(0,0,0,0.2);
		overflow: hidden;	
		::v-deep .el-table .el-table__cell  {
		text-align: center;
	    }
	}
}
</style>